<template>
	<view class="form">
		<uni-forms ref="valiForm" :model="FormData" :rules="rules" labelWidth="160rpx">
			<uni-forms-item label="旧密码" name="oldPassword">
				<input class="uni-input" v-model="FormData.oldPassword" password type="text" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="newPassword">
				<input class="uni-input" v-model="FormData.newPassword" password type="text"
					placeholder="请输入(6至20位数字或字母)" />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="newPassword2">
				<input class="uni-input" v-model="FormData.newPassword2" password type="text" placeholder="请再次输入新密码" />
			</uni-forms-item>
			<button class="customer-btn" @click="submit(FormData)">保存</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		exchangePassword
	} from "@/api/user.js"
	import {
		MD5
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				FormData: {
					accountId: '',
					newPassword: '',
					oldPassword: '',
					newPassword2: '',
				},
				newPassword2: '',
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入旧密码',
						}, ]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},
							{
								minLength: 6,
								maxLength: 20,
								errorMessage: '请设置最少6位以上，不超过20位的密码',
							}, {
								validateFunction: function(rule, value, data, callback) {
									var regx = /^[A-Za-z0-9]+$/
									console.log(regx.test(value))
									if (!regx.test(value)) {
										callback('密码只能输入数字和字母')
									}
									return true
								}
							}
						]
					},
					newPassword2: {
						rules: [{
								required: true,
								errorMessage: '两次新密码输入不一致！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== data.newPassword) {
										callback('两次新密码输入不一致！')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.valiForm.setRules(this.rules)
			})
		},
		methods: {
			submit(form) {
				this.$refs.valiForm.validate().then(res => {
					console.log('表单数据信息：', res);
					let options = {
						accountId: '',
						oldPassword: MD5(form.oldPassword),
						newPassword: MD5(form.newPassword)
					}
					options.accountId = uni.getStorageInfoSync('userInfo').accountId
					exchangePassword(options).then((res) => {
						if (res.success) {
							uni.showToast({
								title: '密码修改成功！'
							});
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.customer-btn {
		background-color: #00B5DD !important;
		color: #fff;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		border-radius: 8px;
		height: 44px;
		line-height: 44px;
		font-size: 32rpx;
		font-weight: 500;
	}
</style>